<template>
  <div v-if="showFlag">
    <el-dialog
      @closed="closeMenuDialog"
      :title="!form.id ? '新增菜单' : '修改菜单'"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible">
      <el-form :model="form" :rules="rules" ref="form" @keyup.enter.native="saveOrUpdate()" label-width="80px">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="菜单url">
          <el-input v-model="form.url"></el-input>
        </el-form-item>

        <el-form-item label="权限标识">
          <el-input placeholder="请输入权限标识如: system:admin:list" v-model="form.permissions"></el-input>
        </el-form-item>

        <el-form-item label="类型">
          <el-radio-group v-model="form.type">
            <el-radio :label="0">目录</el-radio>
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="所属菜单">
          <el-cascader
            :options="parentMenuList"
            v-model="form.parentArrayId"
            change-on-select>
          </el-cascader>
        </el-form-item>

        <el-form-item label="排序">
          <el-input v-model="form.sort"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
      <el-button @click="closeForm">取消</el-button>
      <el-button type="primary" @click="saveOrUpdate()">确定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
      name: 'menu-form',
      props: {
        showFlag: {
          type: Boolean,
          required: false,
          default: false
        },

        formData: {
          type: Object,
          required: false,
          default: {

          }
        }
      },

      watch: {
        formData (val) {
          this.form = val
        },

        showFlag (val) {
          this.dialogVisible = val
        }
      },

      mounted () {
        this.form = this.formData
        this.dialogVisible = this.showFlag
        this.getParentMenu()
      },

      data () {
        return {
          dialogVisible: '',
          props: {
            value: 'id'
          },
          form: {

          },
          rules: {
            name: [
              {required: true, message: '请输入菜单名称', trigger: 'blur'}
            ]
          },
          parentMenuList: []
        }
      },

      methods: {
        getParentMenu () {
          let that = this
          that.axios.get(that.$http.httpUrl('/system/menu/getMenuByParent')).then(function (response) {
            that.parentMenuList = response.data.data
          })
        },

        closeForm () {
          this.dialogVisible = false
          this.$emit('close')
        },

        closeMenuDialog () {
          this.dialogVisible = false
          this.$emit('closeDialog')
        },

        saveOrUpdate () {
          let that = this
          let parentId = 0 // 取最后一位作为父类id
          let parentIdsLength = that.form.parentArrayId.length
          if (parentIdsLength > 0) {
            parentId = that.form.parentArrayId[parentIdsLength - 1]
          }
          that.$refs['form'].validate(function (valid, rules) {
            if (valid) {
              that.form.parent_id = parentId
              delete (that.form.parentArrayId)
              that.axios.post(that.$http.httpUrl('/system/menu/saveOrUpdate'), that.form)
                .then(function (response) {
                  that.formShowFlag = false
                  if (response.data.code === 1) {
                    that.$message({
                      type: 'success',
                      message: response.data.message
                    })
                    that.form = {}
                    that.getParentMenu()
                    that.$emit('close')
                  } else {
                    that.$message({
                      type: 'error',
                      message: response.data.message
                    })
                  }
                }).catch(function (error) {
                  console.log(error)
                })
            } else {
              let message = ''
              for (let rule in rules) {
                message = rules[rule][0].message
                if (message) {
                  break
                }
              }
              that.$message({
                type: 'error',
                message: message
              })
              return false
            }
          })
        }
      }
    }
</script>

<style scoped>

</style>
